var bindStatus = false;
//define page info class
var PageInfo = function(startIndex, count)
{
	this.startIndex = startIndex;//page index, start at 1
	this.count = count;//count for each page
	this.totalNum = 0;//total record number in database
};

//define OrderManager class
var OrderManager = function(){
	this.managerDialog = new OrderManager.OrderDialog(this);
};

//load order list
OrderManager.prototype.loadOrders = function(pageInfo, orderPanelRender)
{
	var orderManager = this;
	var index = pageInfo.startIndex;
	var count = pageInfo.count;
	
	$.ajax ({
		url: "listOrders.action?index="+index+"&count="+count,
		contentType:"application/json",
		type: "POST",
		cache: false,
		processData: false,
		dataType: "json",
	    success: function(data, textStatus)
	    {
			if("success" == textStatus)
			{
				var render = (orderPanelRender ? orderPanelRender : 
					orderManager.getOrderPanelRender());
				
				render.render(data);
			}
			else
			{
				alert("failed to load orders.");
			}
	    }
    });
};

//declare OrderPanelRender class
OrderManager.OrderPanelRender = function(orderManager)
{
	this.render = function(orderArr){
		var panel = orderManager.getOrderPanel();
		if(orderArr && orderArr.length > 0)
		{
			for(i in orderArr)
			{
				var item = new OrderManager.OrderItem("orderId_"+orderArr[i].orderId, 
				"div-orderitem", orderArr[i]);
				
				panel.appendItem(item);//apend order item
			}
		}
	};
	this.toString = function(){return "I am the orignal order panel render.";};
};

OrderManager.prototype.getOrderPanelRender = function()
{
	if(!this.orderRender)
	{
		this.setOrderPanelRender(new OrderManager.OrderPanelRender(this));
	}
	return this.orderRender;
};
OrderManager.prototype.setOrderPanelRender = function(render)
{
	this.orderRender = render;
};

//declare OrderPanel class
OrderManager.OrderPanel = function(orderManager)
{
	this.div = $("#div-orders-panel");
	this.getDiv =  function()
	{
		return this.div;
	};
	this.items = [];
	
	this.appendItem =  function(childItem)
	{
		this.items.push(childItem);
		this.getDiv().children("#div-order-items").append(childItem.getDiv());
	};
	
	this.toString = function(){return "I am the orignal order panel.";};
};
OrderManager.prototype.getOrderPanel = function()
{
	if(!this.orderPanel)
	{
		this.setOrderPanel(new OrderManager.OrderPanel(this));
	}
	return this.orderPanel;
};
OrderManager.prototype.setOrderPanel = function(panel)
{
	this.orderPanel = panel; 
};
//declare OrderItem class
OrderManager.OrderItem = function(id, className, data)
{
	this.div = $("<div id=\""+id+"\" class=\""+className+"\"></div>");
	if(data)
	{
		//this.div.html(JSON.stringify(data));
		this.div.append($("<span class=\"label span_order_id\">"+data.orderId+"</span>"));
		this.div.append($("<span class=\"label span_table_id\">"+data.tableId+"</span>"));
		this.div.append($("<span class=\"label span_person_num\">"+data.personNumber+"个</span>"));
		this.div.append($("<span class=\"label span_order_status\">"+data.orderStatus+"</span>"));
		this.div.append($("<span class=\"label span_order_date\">"+(new Date(data.orderDate)).toLocaleString()+"</span>"));
		this.div.append($("<span class=\"label span_total_amount\">￥"+data.originalAmount+"</span>"));
		this.div.append($("<span class=\"label span_real_amount\">￥"+data.realAmount+"</span>"));
//		this.div.append($("<span class=\"label span_manage\">"+
//		"<button id=\"manage_"+data.orderId+"\" class=\"bnt_manager\" >管理</button></span>"));
		
		var spanDiv = $("<span class=\"label span_manage\"></span>");
		this.div.append(spanDiv);
		var butDiv = $("<button id=\"manage_"+data.orderId+"\" class=\"bnt_manager\" >管理</button></span>");
		butDiv.appendTo(spanDiv);
		
		$(butDiv).click(function(){
			$("#manager-dialog").dialog( "open" );
			return true;
		});
	}
	
	this.getDiv =  function()
	{
		return this.div;
	};
	
	this.toString = function(){return "I am the orignal order item div.";};
};


//declare Order Dialog class
OrderManager.OrderDialog = function(orderManager)
{
	//$( "#dialog:ui-dialog" ).dialog( "destroy" );
	this.div = $("#manager-dialog");
	
	this.updateTips = function(t){
		tips.text(t)
			.addClass("ui-state-highlight");
		setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
	};
	
	this.checkLength = function(o, n, min, max){
		if ( o.val().length > max || o.val().length < min ) {
			o.addClass( "ui-state-error" );
			updateTips( "Length of " + n + " must be between " +
				min + " and " + max + "." );
			return false;
		} else {
			return true;
		}
	}
	
	this.checkRegexp = function (o, regexp, n) {
		if ( !( regexp.test( o.val() ) ) ) {
			o.addClass( "ui-state-error" );
			updateTips( n );
			return false;
		} else {
			return true;
		}
	}
	
	this.div.dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {
				"保存": function() {
					var name = $( "#name" ),
							email = $( "#email" ),
							password = $( "#password" ),
							allFields = $( [] ).add( name ).add( email ).add( password ),
							tips = $( ".validateTips" );
					
					
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

					bValid = bValid && checkLength( name, "username", 3, 16 );
					bValid = bValid && checkLength( email, "email", 6, 80 );
					bValid = bValid && checkLength( password, "password", 5, 16 );

					bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
					// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
					bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );
					bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

					if ( bValid ) {
						$( "#users tbody" ).append( "<tr>" +
							"<td>" + name.val() + "</td>" + 
							"<td>" + email.val() + "</td>" + 
							"<td>" + password.val() + "</td>" +
						"</tr>" ); 
						$( this ).dialog( "close" );
					}
				},
				"取消": function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});
};